<template>
    <div v-if="data">
        <van-search
                :autofocus="true"
                background="#C92519"
                v-model="keyword"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch">
            <template #left>
                <van-icon name="arrow-left" @click="goBack"/>
            </template>
            <template #action>
                <div @click="onSearch('goodslist')" class="searchTxt">搜索</div>
            </template>
        </van-search>
        <div class="history">
            <span>搜索历史</span>
            <van-icon name="delete-o"/>
        </div>
        <div class="history-count">
<!--            <span>自行车</span>-->
<!--            <span>进口红酒</span>-->
            <span>暂无搜索历史</span>
        </div>
        <div class="find">
            <span>搜索发现</span>
            <van-icon name="replay"/>
        </div>
        <div class="find-count">
            <span v-for="defaults in data.hotKeywordList">{{ defaults.keyword }}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Search",
        data() {
            return {
                keyword: '',
                data: null
            }
        },
        methods: {
            onSearch(name) {
                if (this.keyword != '') {
                    // console.log(1)
                    this.$router.push({
                        name: name,
                        query: {
                            keyword: this.keyword
                        }
                    })
                }
            },
            goBack() {
                this.$router.go(-1)
            }
        },
        async created() {
            const get1 = await this.$get('search/index')
            this.data = get1.data.data
            console.log(get1.data.data)
        }
    }
</script>

<style lang="less" scoped>

  // 搜索框
  .van-search {
    height: 37px;
    line-height: normal;

    .van-cell--borderless {
      height: 25px;
      line-height: normal;
    }
  }


  .searchTxt {
    margin-right: 25px;
  }

  .history {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    font-size: 14px;

    :first-child {
      margin-left: 20px;
    }

    .van-icon-delete-o {
      margin-right: 29px;
      font-size: 20px;
    }
  }

  .history-count {
    margin-left: 15px;
    margin-top: 11px;
    font-size: 13px;

    > span {
      margin-right: 17px;
      margin-bottom: 11px;
      padding: 4px 12px;
      display: inline-block;
      border-radius: 20px;
      background-color: #ECECEC;
    }
  }

  .find {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    font-size: 14px;

    :first-child {
      margin-left: 20px;
    }

    .van-icon-replay {
      margin-right: 29px;
      font-size: 20px;
    }
  }

  .find-count {
    margin-left: 15px;
    margin-top: 11px;
    font-size: 13px;

    > span {
      margin-right: 17px;
      margin-bottom: 11px;
      padding: 4px 12px;
      display: inline-block;
      border-radius: 20px;
      background-color: #ECECEC;
    }
  }
</style>
